<template>
  <!-- 搜索框 -->
  <div class="search-section">
    <el-form 
      :model="searchForm" 
      :inline="true" 
      class="search-form"
      @submit.prevent="handleSearch"
    >
      <el-form-item label="添加日期">
        <el-date-picker
          v-model="searchForm.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          @change="handleDateChange"
        />
      </el-form-item>
      
      <el-form-item label="客户名称">
        <el-input
          v-model="searchForm.customerName"
          placeholder="请输入客户名称"
          clearable
          @clear="handleSearch"
          @keyup.enter="handleSearch"
        />
      </el-form-item>
      
      <el-form-item label="联系人">
        <el-input
          v-model="searchForm.contact"
          placeholder="请输入联系人"
          clearable
          @clear="handleSearch"
          @keyup.enter="handleSearch"
        />
      </el-form-item>
      
      <el-form-item label="联系电话">
        <el-input
          v-model="searchForm.phone"
          placeholder="请输入联系电话"
          clearable
          @clear="handleSearch"
          @keyup.enter="handleSearch"
        />
      </el-form-item>
      
      <el-form-item label="客户状态">
        <el-select
          v-model="searchForm.status"
          placeholder="请选择状态"
          clearable
          @change="handleSearch"
        >
          <el-option label="全部" value="" />
          <el-option label="正常" value="1" />
          <el-option label="停用" value="0" />
        </el-select>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="handleSearch">
          <el-icon><Search /></el-icon>
          搜索
        </el-button>
        <el-button @click="handleReset">
          <el-icon><Refresh /></el-icon>
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'

export default {
  name: 'SearchSection',
  components: {
    Search,
    Refresh
  },
  emits: ['search', 'reset'],
  setup(props, { emit }) {
    const searchForm = reactive({
      dateRange: [],
      customerName: '',
      contact: '',
      phone: '',
      status: ''
    })

    const handleSearch = () => {
      const searchParams = {
        ...searchForm,
        startDate: searchForm.dateRange?.[0] || '',
        endDate: searchForm.dateRange?.[1] || ''
      }
      emit('search', searchParams)
    }

    const handleReset = () => {
      searchForm.dateRange = []
      searchForm.customerName = ''
      searchForm.contact = ''
      searchForm.phone = ''
      searchForm.status = ''
      emit('reset')
    }

    const handleDateChange = (value) => {
      searchForm.dateRange = value
      handleSearch()
    }

    return {
      searchForm,
      handleSearch,
      handleReset,
      handleDateChange
    }
  }
}
</script>

<style scoped>
.search-section {
  padding: 16px;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-form {
  margin: 0;
}

.search-form .el-form-item {
  margin-bottom: 12px;
  margin-right: 16px;
}

.search-form .el-form-item:last-child {
  margin-right: 0;
}

.search-form .el-button {
  display: flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 768px) {
  .search-form .el-form-item {
    width: 100%;
    margin-right: 0;
  }
}
</style>
